"use client"

import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { UserPlus } from "lucide-react"
import { useState } from "react"

interface RegisterModalProps {
  onClose: () => void
  onRegister: (userData: any) => void
}

export function RegisterModal({ onClose, onRegister }: RegisterModalProps) {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    password: "",
    company: "",
    position: "",
    industry: "",
  })

  const industries = [
    { value: "tech", label: "科技互联网" },
    { value: "finance", label: "金融投资" },
    { value: "manufacturing", label: "制造业" },
    { value: "retail", label: "零售消费" },
    { value: "healthcare", label: "医疗健康" },
    { value: "education", label: "教育培训" },
    { value: "realestate", label: "房地产" },
  ]

  const handleSubmit = (e) => {
    e.preventDefault()
    // 模拟注册
    const userData = {
      id: Date.now().toString(),
      name: formData.name,
      email: formData.email,
      company: formData.company,
      position: formData.position,
      industry: formData.industry,
      membership: "basic",
      avatar: "/placeholder.svg?height=40&width=40",
    }
    onRegister(userData)
  }

  return (
    <Dialog open={true} onOpenChange={onClose}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle className="flex items-center space-x-2">
            <UserPlus className="w-5 h-5" />
            <span>用户注册</span>
          </DialogTitle>
        </DialogHeader>

        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="name">姓名</Label>
            <Input
              id="name"
              placeholder="请输入姓名"
              value={formData.name}
              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
              required
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="email">邮箱</Label>
            <Input
              id="email"
              type="email"
              placeholder="请输入邮箱"
              value={formData.email}
              onChange={(e) => setFormData({ ...formData, email: e.target.value })}
              required
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="password">密码</Label>
            <Input
              id="password"
              type="password"
              placeholder="请输入密码"
              value={formData.password}
              onChange={(e) => setFormData({ ...formData, password: e.target.value })}
              required
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="company">公司名称</Label>
            <Input
              id="company"
              placeholder="请输入公司名称"
              value={formData.company}
              onChange={(e) => setFormData({ ...formData, company: e.target.value })}
              required
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="position">职位</Label>
            <Input
              id="position"
              placeholder="请输入职位"
              value={formData.position}
              onChange={(e) => setFormData({ ...formData, position: e.target.value })}
              required
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="industry">所属行业</Label>
            <Select value={formData.industry} onValueChange={(value) => setFormData({ ...formData, industry: value })}>
              <SelectTrigger>
                <SelectValue placeholder="请选择行业" />
              </SelectTrigger>
              <SelectContent>
                {industries.map((industry) => (
                  <SelectItem key={industry.value} value={industry.value}>
                    {industry.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div className="flex space-x-2">
            <Button type="button" variant="outline" onClick={onClose} className="flex-1 bg-transparent">
              取消
            </Button>
            <Button type="submit" className="flex-1">
              注册
            </Button>
          </div>
        </form>

        <div className="text-center text-sm text-slate-500">
          已有账号？
          <Button variant="link" className="p-0 h-auto text-sm">
            立即登录
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}
